﻿<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href="css/bootstrap.css" rel="stylesheet" />
    <style>
        .loader {
            display: none;
        }

        .main {
            margin-top: 65px;
        }

        html, body {
            background: #eee;
        }

        .main-2 {
            padding: 10px;
        }
    </style>
</head>
<body>
    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">LOOK</a>
            </div>
            <div id="navbar" class="navbar-collapse collapse" aria-expanded="false" style="height: 1px;">
                <ul class="nav navbar-nav">
                    <li>
                        <a href="profile.html">Профиль</a>
                    </li>
                    <li class="active">
                        <a href="graphic.html">График работы</a>
                    </li>
                    <li>
                        <a href="#contact">Отработанное время</a>
                    </li>
                </ul>
            </div><!--/.nav-collapse -->
        </div>
    </nav>
    <div class="container main">
        <div class="jumborton">
            <div class="panel panel-primary">
                <div class="panel-body">
                    <div class="row main-2">
                        <div class="alert alert-success loader" id="no-data">
                            Извините, данные еще не заполнены Вашим менеджером.
                        </div>
                        <table class="table table-hover">
                            <tr>
                                <td>
                                    Должн. оплатить
                                </td>
                                <td id="mustPay"></td>
                            </tr>
                            <tr>
                                <td>Факт. оплата</td>
                                <td id="factPay"></td>
                            </tr>
                            <tr>
                                <td>Штрафы</td>
                                <td id="penalties"></td>
                            </tr>
                            <tr>
                                <td>Комментарий</td>
                                <td id="comment"></td>
                            </tr>
                        </table>
                        <a href="graphic.html" class="btn btn-primary">Назад</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="scripts/jquery-1.9.1.js"></script>
    <script src="scripts/bootstrap.min.js"></script>
    <script>
        $(document).ready(function () {
            var idGraphic = localStorage.getItem("idGraphic");
            var baseUrl = localStorage.getItem("baseUrl");
            localStorage.removeItem("idGraphic");
            $.ajax({
                url: baseUrl + "api/PaymentsApi",
                type: "GET",
                data: { idGraphic: idGraphic },
                error: function () {
                    //alert("Извините, произошла ошибка");
                    $("#no-data").show();
                },
                success: function (response) {
                    if (!response) {
                        $("#no-data").show();
                    }
                    fillData(response);
                }
            });

            function fillData(response) {
                $("#mustPay").text(response.MustPay);
                $("#factPay").text(response.FactPay);
                $("#penalties").text(response.Penalties);
                $("#comment").text(response.Comment);
            }
        });
    </script>
</body>
</html>